<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
      body{
        display: flex;
        justify-content: center;
        justify-items: center;
        height: 100%;
        margin: 10px;
        font-family: Arial;
      }
       fieldset{
          border: 3px solid #663399;
          border-radius: 12px;
          box-shadow: 0 0 15px rgba(102, 51, 153, 0.2);
          background-color: white;
          padding: 40px;
          width: 350px;
          max-width: 90%;
      }
      legend {
          text-align: center;
          font-size: 1.3em;
          font-weight: bold;
          color: #663399;
          margin-bottom: 20px;
      }
      .input-group {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
      }
      .input-group label {
          margin-right: 10px;
      }
      input{
          padding: 5px;
          background-color: white;
          border: 1px solid #ccc;
          border-radius: 3px;
          flex: 1;
      }
      button{
          width: 40%;
          padding: 8px;
          background: #663399;
          color: white;
          border: none;
          margin-top: 10px;
          margin-left: 20px;
      }
      .error{
          color: red;
          font-size: 12px;
      }
    </style>
</head>
<body>
        <fieldset>
            <legend>用户登录</legend>
            <form id="loginForm">
                <div class="input-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username">
                </div>
                <div id="userError" class="error"></div>

               <div class="input-group">
                    <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <input type="password" id="password">
                </div>
                <div id="passError" class="error"></div>

                <button type="submit">登录</button>
                <button type="reset">重置</button>

            </form>
        </fieldset>

        <script>
            document.getElementById('loginForm').onsubmit=function(e){
                e.preventDefault();

                let user=document.getElementById('username').value;
                let pass=document.getElementById('password').value;
                let valid=true;

                document.getElementById('userError').textContent='';
                document.getElementById('passError').textContent='';

                if(!user){
                    document.getElementById('userError').textContent='用户名不能为空';
                    document.getElementById('username').focus();
                    valid=false;
                }else if(user.length>20){
                    document.getElementById('userError').textContent='用户名需8-20个字符';
                    document.getElementById('username').focus();
                    valid=false;
                }

                if(!pass){
                    document.getElementById('passError').textContent='密码不能为空';
                    document.getElementById('password').focus();
                    valid=false;
                }else if(pass.length<8||pass.length>20){
                    document.getElementById('passError').textContent='密码需8-20个字符';
                    document.getElementById('password').focus();
                    valid=false;
                }


                if(valid) alert('登陆成功！');
            };
        </script>
</body>
</html>